<template>
    <headerr></headerr>
    <div class="tao-row index mt-4 clearfix">
        <crumbss :items="items"></crumbss>
        <stepp :items="['选择区域','选择座位','结账付钱']" :select="2"></stepp>
        <div>
            <chooseSeat :seatInfoList="seatInfoList" :seatPriceList="seatPriceList" :seatList="seatList" :seatData="seatData" @checkOut="checkOut" @delete="delSeatData" @addSeatData="addSeat" @deleteSeatData="deleteSeatData"></chooseSeat>
        </div>
    </div>
    <footerr></footerr>
</template>
<script setup>
import headerr from "../../components/header/index.vue"
import footerr from "../../components/footer/index.vue"
import stepp from "../../components/step/step.vue"
import crumbss from "../../components/crumbs/crumbs.vue"
import chooseSeat from "./chooseSeat/chooseSeat.vue"
import {reactive,ref,toRaw} from "vue"
import {useRoute,useRouter} from "vue-router"
import {getItems,getSchedule,getSeatList} from "../../utils/api"
import {usePayOrder} from "../../store/payOrderStore"

let route = useRoute();
let router = useRouter();

const selectInfo = route.query;

/**
 * 商品信息
 */
let items = ref({});

/**
 * 日程事件表
 */
let seatInfoList = reactive([]);
let seatPriceList = reactive([]);

getItems(selectInfo.itemId).then(({data})=>{
    items.value=data.data;
    console.log(items);

    getSchedule(selectInfo.timePlan,items.value.cinemaId).then(({data})=>{
    
        seatInfoList.push(...data.data.seatInfoList);
        seatPriceList.push(...data.data.seatPriceList);
    })
})

/**
 * 座位列表
 */
let seatList = ref({});
getSeatList(selectInfo.timePlan).then(({data})=>{
    seatList.value=data.data;
})
/**
 * 选择的座位
 */
let seatData = reactive(new Map());

let orderInfo = reactive({});

function delSeatData(coordinate){
    seatData.delete(coordinate);
}

function addSeat(seat){
    seatData.set((seat.x)+'_'+(seat.y),seat);
}

function deleteSeatData(seat){
    seatData.delete((seat.x)+'_'+(seat.y),seat);
}

/**
 * 结算
 */
function checkOut(){
    let tmp1 = [];
    seatData = toRaw(seatData);
    for(var e of seatData.values()){
        e.price=seatPriceList.find(p=>p.areaLevelName==e.areaLevel).price;
        tmp1.push(e);
    }
    orderInfo.seatData=tmp1;
    orderInfo.comData=selectInfo;
    orderInfo.items=items;
    usePayOrder().payOrder(orderInfo);
    router.push({name:"orderConfirm"});
}

</script>
<style lang="less">
    .ticket-step{
        ul{
            height: 50px;
            
            li{
                display: inline-block;
                width: 400px;
                height: 50px;
                color: #fff;
                font-size: 18px;
                line-height: 50px;
                background: #454545;
                text-align: center;
                position: relative;
                font-style: oblique;
            }
            li:nth-child(2){
                background: #d8000b;
            }
            li:nth-child(2):before{
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                background: #d8000b;
                left: 0;
                border-left: 25px solid #454545;
                border-top: 25px solid #d8000b;
                border-bottom: 25px solid #d8000b;
            }
            li:nth-child(2):after{
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                background: #d8000b;
                right: -50px;
                border-left: 25px solid #d8000b;
                border-top: 25px solid #454545;
                border-bottom: 25px solid #454545;
                border-right: 25px solid #454545;
                z-index: 2;
            }
        }
    }
</style>